<!DOCTYPE html>
<html  xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <script src="/layui/layui.js"></script>
    <script src="/js/jquery/jquery-3.5.1.js"></script>
    <script src="/js/book/book.js"></script>
    <link rel="stylesheet" href="/layui/css/layui.css">
    <link rel="stylesheet" href="/css/bookList.css">
    <title>目录</title>

</head>
<body  >
<!--style="  background:#FFF;background:rgba(200, 100, 100, 0.5);"-->
<div class="layui-header" style="filter:alpha(opacity=50);background:#d8be5e40;width:100%;" >
    <ul class="layui-nav  layui-layout-right " style="filter:alpha(opacity=50);background:#d8be5e00;" >
        <li class="layui-nav-item layui-hide-xs">
            <a href="javascript:theme()"  style="color: red;" >背景设置</a>

        </li>

    </ul>
</div>
<div class="book-title  " id = "book-title"></div>

<div class="book-list" id="book-list" width="100%" style="margin-top: 50px;">
    <table class="table-book" id="table-book" >
    </table>
</div>

<script type="text/javascript"  th:inline="javascript">
    var bookName="";
    var bookCode=[[${bookCode}]];
    var data = JSON.stringify({"bookCode":bookCode});
    $.ajax({
        type:"post",
        url:'/book/queryBookList',
        data:data,
        dataType:"json",
        async:false,
        contentType : "application/json; charset=utf-8",
        success: function(res){
            var book = res.data;
            var zjList = book.zjList;
            var btitle = $.parseJSON(book.title);
            bookName=btitle.bookName;
            var div="";
          /*  <div class='img-css'><img src='"+btitle.imgSrc+"'   alt="+btitle.bookName+">"+"</div>*/
            div="<div class='table-css'> <table class='title-tbale'>" +
                "<tr><td rowspan='4'><div class='img-css'><img src='"+btitle.imgSrc+"'   alt="+btitle.bookName+">"+"</div></td>" +
                "<td colspan='6' style='text-align: center;' ><h1>"+btitle.bookName+"</h1></td></tr>" +
                "<tr><td colspan='6' style='text-align: center;'><div class='title-tbale-row'>作者:</div><div class='title-tbale-row'>张三 |</div><div class='title-tbale-row'>是否完结:</div>" +
                "<div class='title-tbale-row'>连载中 | </div><div class='title-tbale-row'>类别:</div><div class='title-tbale-row'>玄幻 |</div><div class='title-tbale-row'>更新时间:</div><div class='title-tbale-row'>2020-01-02</div></td></tr>"+
                "<tr><td  colspan='6'><div> "+btitle.bookMark+" </div></td></tr>"+
                "<tr><td colspan='6'> <div class='title-tbale-row'>最新更新：</div><div class='title-tbale-row' style='color: red'>765：神战的差异</div>" +
                "<div class='title-tbale-row'style='float: right;' ><button type='submit' id='downLoad' class='layui-btn layui-btn-warm layui-btn-radius'>小说下载</button></div></td></tr>"+
                "</table></div>"
            $("#book-title").append(div);
            for(var i = 0; i < zjList.length; i++ ){
                var detail =  $.parseJSON( zjList[i] );
                var html = "";
                var tr="<tr class='bookList-tr'></tr>"
                html +=     "<td class='bookList-td'><a href='/fdread/readBook"+detail.h+"' target='_blank'>"+detail.titleName+"</a></td>"
                if(i%3==0){
                    $("#table-book").append(tr);
                    $("#table-book").append(html);
                }else{
                    $("#table-book").append(html);
                }

            }

            $("#downLoad").on("click", function () {


                layui.use('layer', function(){
                    var layer = layui.layer;

                    layer.msg(' '+bookName+'', {
                        //skin: 'layui-layer-molv',
                        shadeClose: true,
                        time:0,
                        title: false,
                        closeBtn: 0,
                        area: ['300px', '150px'],
                        btn: ['下载']

                    },  function(){
                        window.open("/book/downloadBook?bookCode="+bookCode+"&bookName="+bookName+"");
                    });

                });
            });
        }
    });

</script>

</body>
</html>